<!--
 * @Author: 1453937336@qq.com 1453937336@qq.com
 * @Date: 2024-07-09 17:30:50
 * @LastEditors: 1453937336@qq.com 1453937336@qq.com
 * @LastEditTime: 2024-07-15 10:25:47
 * @FilePath: \itforce-hris\src\components\import-data\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <a-button @click="openClick">
        <i class="fa fa-long-arrow-alt-up"/><span style="margin-left: 4px;margin-right: 4px;">{{ $t('导入') }}</span>
    </a-button>
    <a-modal v-model:open='open' :title="$t('导入')" @ok='handleOk' width="450px">
      <a-row class="exprot">
        <a-col :span="24">
          <a-upload
            class="show"
            name="file"
            v-model:file-list="fileList"
            :before-upload="beforeUpload">
            <slot name="content">
              <a-input-group compact>
                <a-input v-model:value="updateName" style="width: calc(100% - 80px)" disabled/>
                <a-button>{{ $t('浏览') }}</a-button>
              </a-input-group>
            </slot>
          </a-upload>
        </a-col>
      </a-row>
        <a-divider orientation="left" style="font-size: 12px;">{{ $t('导入说明') }}：</a-divider>
        <div class="explain">
          <p v-if="isCn">1、可 <a @click="downloadClick"><i class="fa fa-download" style="margin-left: 4px; margin-right: 4px"/>下载</a> 标准模版，在模板中录入数据导入。</p>
          <p v-else-if="isArabic">1、يستطيع<a @click="downloadClick"><i class="fa fa-download" style="margin-left: 4px; margin-right: 4px"/>تحميل</a> القالب القياسي, استيراد البيانات إلى القالب。</p>
          <p v-else>1、Can <a @click="downloadClick"><i class="fa fa-download" style="margin-left: 4px; margin-right: 4px"/>download</a> Standard template, import data into the template。</p>
          <p>2、{{ $t('Importinstructions2') }}。</p>
        </div>
        <template #footer>
            <a-button key='back' @click='handleClose'>{{ $t('关闭')}}</a-button>
            <a-button key='submit' type='primary' :loading='loading'
            @click='handleOk'>{{ $t('确定')}}</a-button>
        </template>
    </a-modal> 
  </div>
</template>
<script lang='ts' setup>
// import upload from "@/components/upload/index.vue";
import { message } from 'ant-design-vue';
import { useI18n } from "vue-i18n";
const { t: $t } = useI18n();
import { useLanguage } from "@/hooks/index";
const { isEn, isCn, isArabic } = useLanguage();
import { PublicExport } from '@/api/public'
import { download } from "@/utils/common/common";
const emits = defineEmits(['refresh'])
const props = defineProps({
  fileType: {
    required: true,
    type: String,
    default: () => 'default',
  },
  pageName: {
    required: true,
    type: String,
    default: () => 'organizatioin',
  },
  enterpriseId: {
    required: true,
    type: String,
    default: () => '',
  },
  // filePath originalFileName
  downloadFile: {
    required: true,
    type: Object,
    default: () => {}
  }
})
const ApiUrl = {
  'organizatioin': '/itf/organization/web/business_unit/organization/import',
  'employee': '/itf/employee/web/employee/import'
}
const enterpriseId = ref('')
watch(() => props.enterpriseId,
  (newVal) => {
    enterpriseId.value = newVal
  },
  {
    flush: 'post',
    deep: true,
    immediate: true
  }
);
const open = ref(false)
const loading = ref(false)
const updateName = ref('Choose file...')
const fileList = ref([])
const fileValue = ref(null)

let formData = new FormData();
const beforeUpload = (file: any) => {
  updateName.value = file.name
  const isXlsx = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
  if (!isXlsx) return message.error('You can only upload .xlsx file!');
}
const handleExport = async () => {
  console.log('ApiUrl[props.pageName]', ApiUrl[props.pageName]);
  formData.append('file', fileValue.value);
  formData.append('enterpriseId', enterpriseId.value);
  const { code } = await PublicExport(formData, ApiUrl[props.pageName]).finally(() => {
    formData = new FormData()
  });
  if (code === 200) {
    message.success('导入成功!')
    handleClose()
    refresh()
  }
}
const handleOk = () => {
  handleExport()
}
// 下载模版
const downloadClick = () => {
  download(props.downloadFile)
}
const openClick = () => {
  open.value = true
}
const handleClose = () => {
  open.value = false
  updateName.value = ''
}
const refresh = () => {
    emits('refresh')
}
</script>
<style lang='scss' scoped>

.exprot {
  margin-top: 16px;
  width: 100%;
}
.explain {
  padding: 0 24px 24px 24px;
  p {
    font-size: 12px;
  }
}
.show {
  :deep(.ant-upload-list-item) {
    display: none;
  }
}
::v-deep {
  .ant-upload-wrapper .ant-upload-select {
    width: 100%;
  }
  .ant-input[disabled],
  .ant-input[disabled]:hover {
    border: 1px solid #dadada !important;
  }
  .ant-btn {
    border-radius:  0;
  }
  .ant-input-group.ant-input-group-compact>*:last-child {
    border-start-end-radius: 3px;
    border-end-end-radius: 3px;
  }
}
</style>